<template>
  <ul class="fm_ul" v-if="showList">
    <li class="fm_li2 module" @click="selectFm(v.song_id,index)" v-for=" (v, index) in fmList" :key="v.song_id">
      <div class="img_grp">
        <img v-lazy="v.pic_small" alt="">
        <div class="icon_grp">
          <span class="iconfont icon-play"></span>
        </div>
      </div>
      <div class="content_grp">
        <div class="article_title">
          {{v.title}}
        </div>
        <div class="other_grp">
          <span>{{v.author}}</span>
          <span>|</span>
          <span>{{v.publishtime}}</span>
          <span class="iconfont icon-chakan"> {{v.hot}}</span>
          <span class="iconfont icon-zan2-icon"> 888</span>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
  export default {
    name: 'FmList',
    props: {
      fmList: Array,
      nid:Number
    },
    data() {
      return {}
    },
    methods:{

      selectFm(id){
        let fmtid = this.nid
        this.$router.push({path:`/fmPlayer/${fmtid}/${id}`})
      }
    },
     computed:{
       showList() {
         return this.fmList.length
       }
     }
  }
</script>

<style scoped>
  .fm_ul {
    width: 100%;
    padding: 20px 20px 20px 20px;
    margin: 0;

  }

  .fm_li2 {
    width: 100%;
    height: 145px;
    padding: 30px 20px;
    border: none;
    border-top: solid 1px #ededef;
    margin: 0;
    margin-bottom: 20px;
  }

  .fm_li2 .article_title {
    text-align: left;
    font-size: 30px;
    color: #333333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .fm_li2 .img_grp {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    float: left;
    overflow: hidden;
    margin-right: 25px;
    border: solid 1px #c5c5c7;
  }

  .img_grp img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .icon_grp {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.5;
    background-color: black;
    overflow: hidden;

  }

  .icon-play {
    color: white;
    display: block;
    text-align: center;
    margin-top: 25px;
  }

  .other_grp {
    margin-top: 8px;
    text-align: left;
    font-size: 24px;
    color: #c5c5c7;

  }

  .other_grp span {
    text-align: left;
    width: 120px;
    font-size: 24px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .other_grp .iconfont {
    font-size: 26px;
  }

  .other_grp span:nth-of-type(1) {
    width: auto;
    max-width:80px;
  }

  .other_grp span:nth-of-type(2) {
    width: 3px;
    margin:0 20px;
  }

  .other_grp span:nth-of-type(3) {
    width: 130px;
    margin-right: 10px;
  }
  .other_grp span:nth-of-type(4) {
    width: 130px;
    margin-right: 10px;
  }

  .icon_grp span {
    font-size: 30px;
    margin-top: 22px;
    margin-left: 2px;

  }
</style>
